<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人作品集</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <nav>
            <div class="logo" data-lang="site.title">个人作品集</div>
            <ul class="nav-links">
                <li><a href="#home" data-lang="nav.home">首页</a></li>
                <li><a href="#about" data-lang="nav.about">关于我</a></li>
                <li><a href="#portfolio" data-lang="nav.portfolio">作品集</a></li>
                <li><a href="#contact" data-lang="nav.contact">联系我</a></li>
                <li class="language-switch">
                    <button id="switchToZh" class="lang-btn active">中</button>
                    <button id="switchToEn" class="lang-btn">En</button>
                </li>
                <li>
                    <button id="themeToggle" class="theme-toggle">
                        <i class="fas fa-moon"></i>
                        <span data-lang="theme.toggle">深色模式</span>
                    </button>
                </li>
            </ul>
            <div class="hamburger">
                <div class="bar"></div>
                <div class="bar"></div>
                <div class="bar"></div>
            </div>
        </nav>
    </header>

    <!-- 我的世界风格装饰元素 -->
    <div class="minecraft-decoration grass-block"></div>
    
    <!-- 书本图标 -->
    <!-- 英雄区域右侧书本图标 -->
    <div class="book-icon" data-book-id="1" style="top: 20%; right: 8%; --book-rotation: 15deg;">
        <i class="fas fa-book-open"></i>
    </div>
    <div id="book-content-1" class="book-content" style="top: 20%; right: 13%;">
        <p>有一份光，发一份热</p>
    </div>
    
    <!-- 英雄区域左侧书本图标 -->
    <div class="book-icon" data-book-id="5" style="top: 30%; left: 8%; --book-rotation: -10deg;">
        <i class="fas fa-book-reader"></i>
    </div>
    <div id="book-content-5" class="book-content" style="top: 30%; left: 13%;">
        <p>此后没有炬火，我便是唯一的光</p>
    </div>
    
    <!-- 关于我部分书本图标 -->
    <div class="book-icon" data-book-id="2" style="top: 70%; left: 10%; --book-rotation: 5deg;">
        <i class="fas fa-book"></i>
    </div>
    <div id="book-content-2" class="book-content" style="top: 70%; left: 15%;">
        <p>星星之火可以燎原</p>
    </div>
    
    <!-- 作品集部分书本图标 -->
    <div class="book-icon" data-book-id="3" style="top: 130%; right: 8%; --book-rotation: -8deg;">
        <i class="fas fa-book-medical"></i>
    </div>
    <div id="book-content-3" class="book-content" style="top: 130%; right: 13%;">
        <p>飞起玉龙三百万，搅得周天寒彻</p>
    </div>
    
    <!-- 作品集部分左侧书本图标 -->
    <div class="book-icon" data-book-id="6" style="top: 135%; left: 8%; --book-rotation: 12deg;">
        <i class="fas fa-book-open"></i>
    </div>
    <div id="book-content-6" class="book-content" style="top: 135%; left: 13%;">
        <p>横眉冷对千夫指，俯首甘为孺子牛</p>
    </div>
    
    <!-- 联系我部分书本图标 -->
    <div class="book-icon" data-book-id="4" style="top: 180%; left: 8%; --book-rotation: 7deg;">
        <i class="fas fa-bookmark"></i>
    </div>
    <div id="book-content-4" class="book-content" style="top: 180%; left: 13%;">
        <p>数风流人物，还看今朝</p>
    </div>
    
    <!-- 联系我部分右侧书本图标 -->
    <div class="book-icon" data-book-id="7" style="top: 175%; right: 8%; --book-rotation: -5deg;">
        <i class="fas fa-book"></i>
    </div>
    <div id="book-content-7" class="book-content" style="top: 175%; right: 13%;">
        <p>真的猛士，敢于直面惨淡的人生，敢于正视淋漓的鲜血</p>
    </div>
    
    <!-- 英雄区域 -->
    <section id="home" class="hero">
        <div class="hero-content">
            <h1 data-lang="hero.greeting">你好，我是<span class="highlight">设计师姓名</span></h1>
                <p data-lang="hero.description">专注于Python开发、<span class="minecraft-text">Minecraft创作</span>和技术创新</p>
                <a href="#portfolio" class="btn" data-lang="hero.cta">查看我的作品</a>
        </div>
    </section>

    <!-- 关于我 -->
    <section id="about" class="about">
        <div class="container">
            <h2 data-lang="about.title">关于我</h2>
            <div class="about-content">
                <div class="about-img">
                    <img src="https://p8.itc.cn/q_70/images03/20211219/1b18d6a0627341cd8a38364c1d4d06aa.png" alt="个人照片">
                </div>
                <div class="about-text">
                    <p data-lang="about.description">我是一名Python Developer，擅长消息中间件、实时数据处理、高可用架构设计。此外利用python进行过Minecraft开发，并在我的世界中国版平台上发布过自己的作品，使用过blockbench，mcstudio等开发工具，并且还喜欢诗歌集，近代历史，生物进化论，哲理。</p>
                    <div class="skills">
                        <h3 data-lang="about.skills">技能专长</h3>
                        <div class="skill-list">
                            <span class="skill-level-1"><i class="fab fa-python"></i> Python</span>
                            <span class="skill-level-1"><i class="fas fa-database"></i> MongoDB</span>
                            <span class="skill-level-2"><i class="fab fa-js"></i> Next.js</span>
                            <span class="skill-level-2"><i class="fas fa-search"></i> ElasticSearch</span>
                            <span class="skill-level-3"><i class="fab fa-rust"></i> Rust</span>
                            <span class="skill-level-1"><i class="fas fa-cube minecraft-icon"></i> Minecraft</span>
                            <span class="skill-level-2"><i class="fas fa-paint-brush"></i> Blockbench</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 专业经历时间线 -->
            <div class="timeline">
                <h3 data-lang="about.experience">专业经历</h3>
                <div class="timeline-item">
                    <div class="timeline-date">2021-2023</div>
                    <div class="timeline-content">
                        <h4><i class="fas fa-robot"></i> OpenAI</h4>
                        <p data-lang="about.job.software-engineer">软件工程师</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-date">2017-2020</div>
                    <div class="timeline-content">
                        <h4><i class="fab fa-google"></i> Google</h4>
                        <p data-lang="about.job.software-engineer">软件工程师</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-date">2014-2016</div>
                    <div class="timeline-content">
                        <h4><i class="fas fa-graduation-cap"></i> Stanford University</h4>
                        <p data-lang="about.education.master">硕士</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-date">2010-2014</div>
                    <div class="timeline-content">
                        <h4><i class="fas fa-university"></i> Tsinghua University</h4>
                        <p data-lang="about.education.bachelor">本科</p>
                    </div>
                </div>

            </div>
            
            <!-- 个人成就 -->
            <div class="achievements">
                <h3 data-lang="about.achievements">个人成就</h3>
                <div class="achievement-list">
                    <div class="achievement-item">
                        <i class="fas fa-trophy"></i>
                        <span data-lang="about.achievement.1">清华大学优秀毕业生</span>
                    </div>
                    <div class="achievement-item">
                        <i class="fas fa-medal"></i>
                        <span data-lang="about.achievement.2">微软MVP</span>
                    </div>
                    <div class="achievement-item">
                        <i class="fas fa-certificate"></i>
                        <span data-lang="about.achievement.3">华为开发者认证</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 作品集 -->
    <section id="portfolio" class="portfolio">
        <div class="container">
            <h2 data-lang="portfolio.title">我的作品</h2>
            <div class="portfolio-grid">
                <div class="portfolio-item">
                    <img src="https://picsum.photos/800/600" alt="实时数据处理系统">
                    <div class="portfolio-info">
                        <h3 data-lang="portfolio.project1.title">实时数据处理系统</h3>
                        <p data-lang="portfolio.project1.desc">基于Python开发的高可用实时数据处理平台，使用消息中间件和ElasticSearch构建，支持TB级数据处理和毫秒级响应。</p>
                    </div>
                </div>
                <div class="portfolio-item">
                    <img src="https://picsum.photos/800/600?random=1" alt="Python自动化工具集">
                    <div class="portfolio-info">
                        <h3 data-lang="portfolio.project4.title">Python自动化工具集</h3>
                        <p data-lang="portfolio.project4.desc">开发的一系列Python脚本工具，用于自动化日常任务、数据分析和系统监控，已在GitHub开源并获得200+星标。</p>
                    </div>
                </div>
                <div class="portfolio-item">
                    <img src="https://picsum.photos/800/600?random=2" alt="分布式爬虫系统">
                    <div class="portfolio-info">
                        <h3 data-lang="portfolio.project6.title">分布式数据采集系统</h3>
                        <p data-lang="portfolio.project6.desc">基于Python的分布式爬虫框架，支持IP代理池、自动重试和反爬机制，高效采集互联网公开数据，数据准确率达99%。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <!-- 联系我 -->
    <section id="contact" class="contact">
        <div class="container">
            <h2 data-lang="contact.title">联系我</h2>
            <div class="contact-content">
                <div class="contact-info">
                    <p data-lang="contact.description">如果您对我的作品感兴趣或有任何合作机会，请随时联系我。</p>
                    <div class="contact-details">
                        <p><i class="fas fa-envelope"></i> 3042564463@qq.com</p>
                        <p><i class="fas fa-globe"></i> <a href="https://kirineko.github.io" target="_blank">kirineko.github.io</a></p>
                    </div>
                    <div class="social-links">
                        <a href="https://kirineko.github.io" target="_blank" title="Personal Website"><i class="fas fa-globe"></i></a>
                        <a href="mailto:3042564463@qq.com" title="Email"><i class="fas fa-envelope"></i></a>
                        <a href="#" title="GitHub"><i class="fab fa-github"></i></a>
                    </div>
                </div>
                <div class="contact-form">
                    <form id="contactForm">
                        <input type="text" name="name" placeholder="您的姓名" data-placeholder-zh="您的姓名" data-placeholder-en="Your Name" required>
                        <input type="email" name="email" placeholder="您的邮箱" data-placeholder-zh="您的邮箱" data-placeholder-en="Your Email" required>
                        <textarea name="message" placeholder="您的留言" data-placeholder-zh="您的留言" data-placeholder-en="Your Message" required></textarea>
                        <button type="submit" class="btn" data-lang="contact.submit">发送消息</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p data-lang="footer.copyright">&copy; 2025 个人作品集. 保留所有权利。</p>
        </div>
    </footer>

    <!-- 深色/浅色模式切换功能 -->
    <script>
        // 初始化主题
        function initTheme() {
            // 检查本地存储中的主题偏好
            const savedTheme = localStorage.getItem('theme');
            // 检查系统偏好
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            
            // 如果有保存的主题，使用它；否则根据系统偏好设置
            if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
                document.documentElement.setAttribute('data-theme', 'dark');
                updateThemeButton('dark');
            } else {
                document.documentElement.setAttribute('data-theme', 'light');
                updateThemeButton('light');
            }
        }

        // 更新主题切换按钮的显示
        function updateThemeButton(theme) {
            const themeToggle = document.getElementById('themeToggle');
            const icon = themeToggle.querySelector('i');
            const text = themeToggle.querySelector('span');
            
            if (theme === 'dark') {
                icon.className = 'fas fa-sun';
                text.textContent = '浅色模式';
                text.setAttribute('data-lang', 'theme.toggle.light');
            } else {
                icon.className = 'fas fa-moon';
                text.textContent = '深色模式';
                text.setAttribute('data-lang', 'theme.toggle');
            }
        }

        // 切换主题
        function toggleTheme() {
            const currentTheme = document.documentElement.getAttribute('data-theme');
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            
            document.documentElement.setAttribute('data-theme', newTheme);
            localStorage.setItem('theme', newTheme);
            updateThemeButton(newTheme);
        }

        // 监听系统主题变化
        function setupThemeListener() {
            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
            
            mediaQuery.addEventListener('change', (e) => {
                // 只有在用户没有明确设置主题时才跟随系统变化
                if (!localStorage.getItem('theme')) {
                    const newTheme = e.matches ? 'dark' : 'light';
                    document.documentElement.setAttribute('data-theme', newTheme);
                    updateThemeButton(newTheme);
                }
            });
        }

        // 在页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 初始化主题
            initTheme();
            
            // 设置主题切换按钮事件
            const themeToggle = document.getElementById('themeToggle');
            if (themeToggle) {
                themeToggle.addEventListener('click', toggleTheme);
            }
            
            // 设置系统主题变化监听
            setupThemeListener();
        });
    </script>
    <script src="main.js"></script>
</body>
</html>
